<template>
  <div v-if="taskForm.type == 3" class="p1756535514 mb20 p30 bfff">
    <div class="fz32 pb20">商品垫付款</div>
    <uv-skeletons :loading="taskForm.id ? false : true" :skeleton=" [{ type: 'line', num: 3, gap: '20rpx' }]">

    <div class="f  jcsb" style="align-items: flex-end;">
      <div class="fz30">顾客预期费用</div>
      <div class="fz30">{{taskForm.estimate_goods_price ? taskForm.estimate_goods_price : '参照市场价'}}</div>
    </div>
    <div v-if="taskForm.service_status == 3 || taskForm.service_status == 4"
      class="f pt20 jcsb" style="align-items: flex-end;">
      <div class="fz30" style="line-height: 1;">商品垫付费用</div>
      <div @click="previewAdvanceImageTap" class="fz30 fac" style="line-height: 1;">
        ¥{{taskForm.advance_payment_price}}
        <uv-icon v-if="taskForm.advance_payment_images && taskForm.advance_payment_images.length" size="28rpx" color="#333" name="arrow-right"></uv-icon>
      </div>
    </div>
    <div
      v-if="(taskForm.service_status == 3 || taskForm.service_status == 4) && taskForm.is_initiation_of_payments == 1"
      class="f pt20 jcsb" style="align-items: flex-end;">
      <div class="fz30">顾客支付</div>
      <div class="fz30" :style="{color: taskForm.is_pay_advance_price == 1 ? '#333' : '#C9CACA'}">
        <div :style="{color: taskForm.is_pay_advance_price == 1 ? '#00AF53' : '#E60012'}" style="display: inline;">
          {{taskForm.is_pay_advance_price == 1 ? '已支付' : '待支付'}}</div>
        ¥{{taskForm.advance_payment_price}}
      </div>
    </div>
    </uv-skeletons>

  </div>
  <div class="p1756535514 p30 bfff">
    <div class="fz32 ">{{taskForm.type == 3 ? '帮买商品清单' : (taskForm.type == 4 || taskForm.type == 5 ? '需求信息' :
      '货品信息')}}</div>
    <uv-skeletons :loading="taskForm.id ? false : true" :skeleton=" [{ type: 'line', num: 3, gap: '20rpx' }]">
      <div v-if="taskForm.type == 1 || taskForm.type == 2" class="f pt20 jcsb" style="align-items: flex-end;">
        <div class="fz30">{{taskForm.goods_type.name}}</div>
        <div class="fz30">{{taskForm.weight}}公斤</div>
      </div>
      <div v-if="taskForm.describe" class="fz30 pt20 pb30" :style="{color: taskForm.type == 3 ? '#333' : '#F37E00'}"
        style="line-height: 1.3;"> {{taskForm.describe}}</div>
      <template v-if="taskForm.goods_img && taskForm.goods_img.length">
        <div v-if="taskForm.type != 3" :class="taskForm.type == 4 || taskForm.type == 5 ? '' : 'pt30'" class="fz32  pb20 ">{{taskForm.type == 4 || taskForm.type == 5 ? '宠物照片' :
          '物品照片'}}</div>
        <div class="p1756535377" style="flex: 1;">
          <img v-for="(child, childIndex) in taskForm.goods_img" :key=" childIndex" class="p1756535377-img"
            @click="previewImageTap(taskForm.goods_img, childIndex)" :src="child" alt="">
        </div>
      </template>
    </uv-skeletons>

    <div v-if="taskForm.type == 3 && taskForm.goods_img && taskForm.goods_img.length" class=" p1756535660"
      style="color: #727171;">未找到商品时，请及时联系顾客</div>
    <div v-if="taskForm.type == 4 || taskForm.type == 5" class=" p1756535660" style="color: #727171;">
      服务过程中，请注意自身安全哦</div>
    <div v-if="(taskForm.type == 1 || taskForm.type == 2|| taskForm.type == 3) && taskForm.remarks"
      class=" p1756535660" style="color: #F8B62D;">
      备注:{{taskForm.remarks}}</div>
  </div>
  <div>

  </div>
  <div v-if="(taskForm.type == 1 || taskForm.type == 2) && taskForm.pick_up_code"
    class="f bfff p1756535514 p30 mt20 jcsb" style="align-items: flex-end;">
    <div class="fz30">取件码</div>
    <div class="fz30">{{taskForm.pick_up_code}}</div>
  </div>
</template>
<script>
  import dataJsonMixin from '../mixin/dataJson.js'
  export default {
    props: {

      taskForm: {
        type: Object,
        default: {}
      },
    },
    mixins: [dataJsonMixin],
    data() {
      return {
        list: [],
      }
    },
    methods: {
      previewAdvanceImageTap(current = 1) {
        let urls = []
        if (this.taskForm.advance_payment_images && this.taskForm.advance_payment_images.length) {
          urls = JSON.parse(JSON.stringify(this.taskForm.advance_payment_images))
        uni.previewImage({
          urls: urls,
          current: current,
          fail() {
            this.$uv.toast('预览图片失败');
          },
        });
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
@import '../common.scss';
  .mt20 {
    margin-top: 20rpx;
  }

  .p1756535377 {
    min-height: 200rpx;
    width: 100%;
    display: flex;

    .p1756535377-img {
      width: calc(33.33% - 14rpx);
      max-height: 200rpx;
      min-height: 200rpx;
      box-sizing: border-box;
    }

    .p1756535377-img:first-child {
      margin-right: 20rpx !important;
    }

    .p1756535377-img:nth-child(2) {
      margin-right: 20rpx;
    }

    .p1756535377-img:nth-child(3) {
      margin-left: 0 !important;
      /* width: 33.33%; */
    }
  }

  .p1756535514 {
    color: #333;
    border-radius: 20rpx;
    box-shadow: 2rpx 2rpx 20rpx 2rpx #eeeeee;
  }

  .p1756535660 {
    background: #F7F8F8;
    border-radius: 10rpx;
    margin-top: 20rpx;
    padding: 20rpx 30rpx;
    font-size: 29rpx;
  }

  .mb20 {
    margin-bottom: 20rpx;
  }
</style>